<template>
  <div :class="disabled ? 'jeecg-form-container-disabled' : ''">
    <fieldset :disabled="disabled">
      <slot name="detail"></slot>
    </fieldset>
    <slot name="edit"></slot>
    <fieldset disabled v-show="defaultField">
      <slot></slot>
    </fieldset>
  </div>
</template>


<script>
  /**
   * 使用方法
   * 在form下直接写这个组件就行了，
   *<a-form layout="inline" :form="form" >
   *     <j-form-container :disabled="true">
   *         <!-- 表单内容省略..... -->
   *     </j-form-container>
   *</a-form>
   */
  export default {
    name: 'JFormContainer',
    props:{
      disabled:{
        type:Boolean,
        default:false,
        required:false
      },
      defaultField: {
        type:Boolean,
        default:false,
        required:false
      }
    },
    mounted(){
      console.log("我是表单禁用专用组件,但是我并不支持表单中iframe的内容禁用")
    }
  }
</script>
<style>
.jeecg-form-container-disabled {
  cursor: not-allowed;
}

.jeecg-form-container-disabled fieldset[disabled] {
  -ms-pointer-events: none;
  pointer-events: none;
}

.jeecg-form-container-disabled .ant-select {
  -ms-pointer-events: none;
  pointer-events: none;
}

.jeecg-form-container-disabled .ant-upload-select {
  display: none;
}

.jeecg-form-container-disabled .ant-upload-list {
  cursor: grabbing;
}

.jeecg-form-container-disabled fieldset[disabled] .ant-upload-list {
  -ms-pointer-events: auto !important;
  pointer-events: auto !important;
}

.jeecg-form-container-disabled .ant-upload-list-item-actions .anticon-delete,
.jeecg-form-container-disabled .ant-upload-list-item .anticon-close {
  display: none;
}

/* 允许滚动事件 */
.jeecg-form-container-disabled .tinymce-editor-container {
  pointer-events: auto !important;
}

.jeecg-form-container-disabled .tox .tox-edit-area__iframe {
  pointer-events: auto !important;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* 禁用编辑器内容区域的编辑功能 */
.jeecg-form-container-disabled .tox .tox-edit-area {
  pointer-events: none;
}

/* 禁用编辑器输入但允许滚动 */
.jeecg-form-container-disabled .tox .tox-edit-area__iframe {
  pointer-events: none;
}

.jeecg-form-container-disabled .tox .tox-editor-container {
  pointer-events: none;
}

.jeecg-form-container-disabled .tox .tox-edit-area__iframe {
  pointer-events: auto;
}

</style>
